import React, { useState, useEffect, memo } from 'react';
import {
  Drawer,
  Button,
  Box,
  Typography,
  Grid,
  Stepper,
  Step,
  StepLabel,
  Stack,
  Checkbox,
  ButtonGroup,
  FormControlLabel,
} from '@material-ui/core';
import { GridRenderCellParams, DataGrid } from '@mui/x-data-grid';

interface DetailProps {
  params: GridRenderCellParams;
}

export const RenderDescription = () => {
  return (
    <Grid container>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Typography color={'text.primary'} variant={'subtitle2'}>
            资产编号：yuiyioufidfdf
          </Typography>
        </Grid>
        <Grid item xs={6}>
          <Typography color={'text.primary'} variant={'subtitle2'}>
            供应商：益海嘉里大豆供应商
          </Typography>
        </Grid>
        <Grid item xs={6}>
          <Typography color={'text.primary'} variant={'subtitle2'}>
            融资产品：益海嘉里大豆供应商
          </Typography>
        </Grid>
        <Grid item xs={6}>
          <Typography color={'text.primary'} variant={'subtitle2'}>
            申请人：益海嘉里大豆供应商
          </Typography>
        </Grid>
        <Grid item xs={6}>
          <Typography color={'text.primary'} variant={'subtitle2'}>
            申请时间：益海嘉里大豆供应商
          </Typography>
        </Grid>
      </Grid>
      <Stack
        direction={'row'}
        spacing={3}
        sx={{
          mt: 1,
          width: '100%',
        }}
        justifyContent={'space-between'}
        alignItems={'center'}
      >
        <Stack
          direction={'row'}
          alignItems={'center'}
          justifyContent={'flex-start'}
          spacing={3}
        >
          <Typography component={'div'} variant={'subtitle2'}>
            付款金额：￥100
          </Typography>
          <Typography component={'div'} variant={'subtitle2'}>
            <FormControlLabel
              control={<Checkbox />}
              label={'自动跳转下一条'}
              sx={{
                fontSize: 'small',
              }}
            />
          </Typography>
        </Stack>
        <Box>
          <ButtonGroup>
            <Button variant={'outlined'}>审批退回</Button>
            <Button variant={'contained'}>审批通过</Button>
          </ButtonGroup>
        </Box>
      </Stack>
      <Stepper
        alternativeLabel
        color={'text.primary'}
        sx={{
          width: '100%',
          mt: 4,
        }}
      >
        <Step>
          <StepLabel>待提交申请</StepLabel>
        </Step>
        <Step>
          <StepLabel>申请审批中</StepLabel>
        </Step>
        <Step>
          <StepLabel>审批完成</StepLabel>
        </Step>
      </Stepper>
    </Grid>
  );
};

export const Detail: React.FC<DetailProps> = memo(
  ({ params }) => {
    const [visible, setVisible] = useState(false);

    return (
      <React.Fragment>
        <Button onClick={() => setVisible(true)}>
          {params?.row?.status === 1 ? '去审核' : '查看'}
        </Button>
        <Drawer
          anchor={'right'}
          open={visible}
          onClose={() => setVisible(false)}
        >
          <Box
            sx={{
              p: 3,
              width: 'calc(100vw - 200px)',
            }}
          >
            <RenderDescription />
          </Box>
        </Drawer>
      </React.Fragment>
    );
  },
  (prevProps, nextProps) => {
    return (
      prevProps?.params?.row?.mortgageRecordId ===
      nextProps?.params?.row?.mortgageRecordId
    );
  },
);
